.root {
  &:hover .indicator {
    opacity: 1;
  }
}

.container {
  scroll-snap-type: x mandatory;
  display: flex;
  align-items: flex-start;

  &::-webkit-scrollbar {
    display: none;
  }
}

.child {
  scroll-snap-align: center;
  flex-shrink: 0;
  scroll-snap-stop: always;

  text-align: center;
}

.child:last-child {
  margin-right: 0 !important;
}

.indicator {
  @apply absolute bottom-[24px] left-[50%] z-[1] flex rounded-[24px] bg-themed-bg_opacity px-6 py-4 opacity-0;
  @apply transition-opacity duration-300;

  transform: translateX(-50%);
  backdrop-filter: blur(20px) saturate(180%);
}
